import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { getArticleList,getArticleDetele } from "../../store/counterSlice";
import instance from "../../apis/request";
import { Space, Table, Tag,Button,Drawer ,Input ,Form,Dropdown} from 'antd';
import { getTian } from "../../apis/apis";
import Search from "../../computed/Search";
function Article() {
    const {articleData,count} = useSelector(state => state.counter)
  const dispatch = useDispatch()
  const [data,setData]=useState({
    page:1,//页码  必传
pageSize:10,//每页显示条数 必传
keyword:null,//搜索标题
tag:null//搜索标签

  })
  const [fy,setFy]=useState({
    current:0,
    pageSize:10,
    total:0
  })
  const aa=async()=>{
    const res=await instance.get('/article/list',{
        params:data
    }).then(res=>{
        dispatch(getArticleList(res))
        console.log(res);
        
        setFy({
            ...fy,
            total:res.count
        })
    })
  }
  useEffect(()=>{
    aa()
  },[data,dispatch])
  const dd=(diss)=>{
    setData({
        page:diss.current,
        pageSize:diss.pageSize
    })
    setFy({
        current:diss.current,
        pageSize:diss.pageSize,
        total:diss.count
    })
  }
  const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '姓名',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '性别',
    dataIndex: 'action',
    key: 'action',
    render: (item, record) => (
      <Tag color='green'>
              男
            </Tag>
    ),
  },
  {
    title: '手机号',
    dataIndex: 'action',
    key: 'action',
    render: (item, record) => (
      13610612156
    ),
  },
  {
    title: '昵称',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button type="primary">编辑</Button>
        <Button type="primary" danger onClick={()=>del(record)}>删除</Button>
      </Space>
    ),
  },
];
const del=(record)=>{
    if(confirm('确定删除吗？')){
       dispatch(getArticleDetele(record.id)) 
    }
    
    
}
const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  const onFinish= async(values) => {
  console.log('Success:', values);
  values.article.tagList=[values.article.tagList]
  values.article.categoryList=[values.article.categoryList]
  values.article.authorId=47529555
  const res=await getTian(values.article)
  console.log(res)
  onClose()
  setData()
};

const onFinishFailed= (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const items = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        设置1
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        设置2
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        设置3
      </a>
    ),
  },
];
const onchangesou=(k)=>{
    console.log(k.keyword)
    setData({
        ...data,
        keyword:k.keyword
    })
}
    return (
        <div>
            <Search kkk={onchangesou}/>
            <h2>用户列表</h2><div className='aws'>
                <Button  type="primary" danger >批量删除</Button>
                <Button onClick={showDrawer}>+ 新增</Button>
                <Dropdown menu={{ items }} placement="bottomLeft"><Button>列设置</Button></Dropdown>
                
            </div>
            <Table dataSource={articleData} columns={columns} pagination={fy} onChange={dd} />
            <Drawer
        title="新增用户"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
        
        <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="用户名"
      name={['article',"title"]}
      rules={[{ required: true, message: '请输入用户名!' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      label="昵称"
      name={['article',"content"]}
      rules={[{ required: true, message: '请输入昵称!' }]}
    >
      <Input />
    </Form.Item>
<Form.Item
      label="标签"
      name={['article',"tagList"]}
      rules={[{ required: true, message: '请输入标签!' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      label="分类"
      name={['article',"categoryList"]}
      rules={[{ required: true, message: '请输入分类!' }]}
    >
      <Input />
    </Form.Item>

    

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        确定
      </Button>
    </Form.Item>
  </Form>
      </Drawer>
        </div>
    );
}

export default Article;